import React, { Component } from 'react';
import { openModal, removeContainer } from 'components/method/openModal';
import { Modal, Button, Form, InputNumber ,Alert} from 'antd';
import { currencyPrecisionCal, messages, queryCurrencyPrecision } from 'share/common';
import ExpenseService from '../expense.service';
import 'styles/my-account/components/receipt-amount-change.scss'

@Form.create()
class ReceiptAmountChange extends Component {

  state = {
    taxRateStrategy: 1000
  };

  componentDidMount() {
    this.getTaxRateStrategy();
  }

  handleOk = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.onOk(values);
      }
    });
  };

  getTaxRateStrategy = async () => {
    const res = await ExpenseService.getTaxRateStrategy();
    this.setState({ taxRateStrategy: res.data });
  };


  render() {
    const { visible, afterClose, invoicedReceiptAmount, totalAmount, unUsedAmount, form: { getFieldDecorator }, currencyCode, vatInvoice, taxRate } = this.props;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 19, offset: 1 },
    };
    return (
      <Modal
        className="receipt-amount-change"
        visible={visible}
        onCancel={afterClose}
        afterClose={afterClose}
        onOk={this.handleOk}
        title={messages('expense-1.key715')/*修改报销金额*/}
        footer={[
          <Button key="back" onClick={afterClose}>
            {messages('common.back')/*返回*/}
          </Button>,
          <Button key="submit" type="primary" onClick={this.handleOk}>
            {messages('common.ok')/*确定*/}
          </Button>,
        ]}
      >
        {
          this.state.taxRateStrategy === 1001 && vatInvoice &&
          <Alert
            message={messages('expense-1.key716',{arg1: taxRate})/*注：剩余可报金额为该发票的税率为{arg1}%的发票行的剩余待报销金额总和*/}
            className="receipt-amount-change-alert"
            type="error"
            showIcon
          />
        }

        <Form>
          <Form.Item
            extra={messages('expense-1.key717',{arg1: currencyCode,arg2: currencyPrecisionCal(currencyCode,totalAmount),arg3: currencyCode,arg4: currencyPrecisionCal(currencyCode,unUsedAmount)})/*发票总额：{arg1} {arg2}，剩余可报：{arg3} {arg4}*/} {...formItemLayout}
            label={messages('common.amount')/*金额*/}
          >
            {getFieldDecorator('invoicedReceiptAmount', {
              initialValue: invoicedReceiptAmount,
              rules: [{
                validator: (rule, value, cb) => {
                  if (!value) {
                    cb(messages('expense-1.key718')/*金额不可为0*/);
                    return;
                  }
                  if (value > unUsedAmount) {
                    cb(messages('expense-1.key719')/*金额不可为超过剩余可报销金额*/);
                  } else {
                    cb();
                  }
                }
              }]
            })(
              <InputNumber
                className="receipt-amount-change-input"
                precision={queryCurrencyPrecision(currencyCode)}
                step={1 / (10 ** queryCurrencyPrecision(currencyCode))}
                placeholder={messages('common.please.input')/*请输入*/}
              />,
            )}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

ReceiptAmountChange.propTypes = {};

ReceiptAmountChange.open = async function (props, env) {
  return await new Promise(resolve => {
    const targetProps = {
      ...props,
      visible: true,
      loadWhenMount: true,
      onOk: data => close(data),
      afterClose: () => {
        removeContainer(container);
        container = null;
      }
    };
    let container = openModal(ReceiptAmountChange, targetProps, env);

    function close(data) {
      resolve(data);
      openModal(ReceiptAmountChange, {
        ...targetProps,
        visible: false
      }, env, container);
    }
  });
};

export default ReceiptAmountChange;

